<template>
    <div class="iframe">
        <div class="i-title">
            echarts
        </div>
        <div class="i-tip">
            <div ref="echarsDom" class="i-echars"></div>
        </div>
    </div>
</template>

<script setup>
import * as echarts from 'echarts';
import {
    ref,
    onMounted
} from 'vue'
const echarsDom = ref(null);
let options = {
    title: {
        text: "在线人数统计"
    },
    grid: {        //离容器上下左右的距离
        left: "10%",
        top: "20%",
        right: "5%",
        bottom: "15%"
    },
    xAxis: {
        data: ['08:00', '09:00', '10:00', '11:00', '12:00', '13:00', '14:00'],
        axisLabel: { //修改坐标系字体颜色
            show: true,
            textStyle: {
                color: "#000000"
            }
        },
    },
    yAxis: {
        name: "单位 : 万",
        nameTextStyle: {    //name字体颜色
            color: "rgba(0,0,0, 1.0)"
        },
        type: 'value',
        axisLabel: { //修改坐标系字体颜色
            show: true,
            textStyle: {
                color: "#000000"
            }
        },
    },
    series: [{
        smooth: true,    //曲线
        type: 'line',    //折线
        data: [13, 35, 15, 43, 26, 47, 23],
        lineStyle: {
            color: "rgba(132, 0, 255, 1.0)"
        }
    },]
}
onMounted(() => {
    const myEcharts = echarts.init(echarsDom.value);
    options && myEcharts.setOption(options);
})
</script>
<style scoped>
.i-echars {
    width: 800px;
    height: 450px;
}
</style>